<template>
  <div style="padding: 0 10px; background-color: rgb(246, 246, 246)">
    <!-- 顶部搜索、地址 -->
    <van-search
      v-model="h_city"
      show-action
      label="地址"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>

    <!-- 轮播喇叭 -->
    <van-notice-bar
      left-icon="volume-o"
      background="#ecf9ff"
      scrollable
      text="关爱生命 奉献真情 营造温馨 文明行医"
    />
    <!-- 轮播图上 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image" height="220px">
        <img :src="image" style="width: 100%; height: 220px" />
      </van-swipe-item>
    </van-swipe>
    <!-- 问诊 -->
    <div style="height: 130px; border-radius: 10px">
      <div
        style="
          height: 50px;
          display: flex;
          justify-content: space-evenly;
          margin-top: 15px;
        "
      >
        <div
          style="
            width: 140px;
            height: 60px;
            background-color: rgb(115, 212, 159);
            border-radius: 12px;
            display: flex;
            justify-content: space-evenly;
          "
        >
          <i class="iconfont icon--yiliao-yisheng">
            <a
              @click="router.push(`/consultation`)"
              style="color: white; font-size: 25px"
              >问医生</a
            >
          </i>
        </div>
        <div
          style="
            width: 140px;
            height: 60px;
            background-color: rgb(91, 168, 248);
            border-radius: 12px;
            display: flex;
            justify-content: space-evenly;
          "
        >
          <i class="iconfont icon-guahao"
            ><a
              @click="router.push(`/home/yuyueguahao`)"
              style="color: white; font-size: 25px"
              >挂号</a
            ></i
          >
        </div>
      </div>
      <div
        style="display: flex; justify-content: space-evenly; margin-top: 30px"
      >
        <div style="display: flex; flex-wrap: wrap; width: 40px">
          <i class="iconfont icon-rentijiance"
            ><a
              @click="router.push(`/Health-examination-subscribe`)"
              style="display: block; margin-top: 5px"
              >体检</a
            ></i
          >
        </div>
        <div style="display: flex; flex-wrap: wrap; width: 50px">
          <i class="iconfont icon-shebaodaili"
            ><a
              style="display: block; margin-top: 5px"
              @click="router.push(`/medi-serch`)"
              >安心购</a
            ></i
          >
        </div>
        <div style="display: flex; flex-wrap: wrap; width: 40px">
          <i class="iconfont icon-jiankang1"
            ><a
              style="display: block; margin-top: 5px"
              @click="router.push(`/`)"
              >健康</a
            ></i
          >
        </div>
        <div style="display: flex; flex-wrap: wrap; width: 40px">
          <i class="iconfont icon-yiyuan"
            ><a
              style="display: block; margin-top: 5px"
              @click="router.push(`/`)"
              >医院</a
            ></i
          >
        </div>
        <div style="display: flex; flex-wrap: wrap; width: 40px">
          <i class="iconfont icon-kouqiangjiankang"
            ><a
              style="display: block; margin-top: 5px"
              @click="router.push(`/`)"
              >口腔</a
            ></i
          >
        </div>
      </div>
    </div>
    <!-- 轮播图下 -->
    <van-swipe
      class="my-swipe"
      :autoplay="2000"
      style="margin-top: 20px"
      indicator-color="white"
    >
      <van-swipe-item
        style="background-image: linear-gradient(#cfdfee, #2570da 100px)"
      >
        <div style="padding: 0px 0px 10px 20px">
          <p style="font-size: 20px; font-weight: bold">
            扩龄9价HPV疫苗可约|9-45岁
          </p>
          <p style="opacity: 0.5">提前预约，抢先排队通道</p>
          <button
            class="dj1"
            style="border-radius: 15px; border: 1px solid skyblue"
          >
            立即查看
          </button>
        </div>
      </van-swipe-item>
      <van-swipe-item
        style="background-image: linear-gradient(#cfdfee, #21b847 100px)"
      >
        <div style="padding: 0px 0px 10px 20px">
          <p style="font-size: 20px; font-weight: bold">购买常备药、防护用品</p>
          <p style="opacity: 0.5">日常防疫包，现货购买</p>
          <button
            class="dj"
            style="border-radius: 15px; border: 1px solid skyblue"
          >
            <a
              href="https://search.jd.com/Search?keyword=%E5%AE%B6%E4%B8%AD%E5%B8%B8%E5%A4%87%E8%8D%AF&enc=utf-8&wq=%E5%AE%B6%E4%B8%AD%E5%B8%B8%E5%A4%87%E8%8D%AF&pvid=4581d4e8a24b4bc4af117c80cce7721e"
              >立即查看</a
            >
          </button>
        </div></van-swipe-item
      >
      <van-swipe-item
        style="background-image: linear-gradient(#cfdfee, #2570da 100px)"
        ><div style="padding: 0px 0px 10px 20px">
          <p style="font-size: 20px; font-weight: bold">
            配置百万医疗险，看病住院不用愁
          </p>
          <p style="opacity: 0.5">社保内外医疗费用均可报销</p>
          <button
            class="dj1"
            style="border-radius: 15px; border: 1px solid skyblue"
          >
            立即查看
          </button>
        </div></van-swipe-item
      >
      <van-swipe-item
        style="background-image: linear-gradient(#cfdfee, #21b847 100px)"
        ><div style="padding: 0px 0px 10px 20px">
          <p style="font-size: 20px; font-weight: bold">
            你是不开心还是真抑郁？
          </p>
          <p style="opacity: 0.5">5分钟测一测</p>
          <button
            class="dj"
            style="border-radius: 15px; border: 1px solid skyblue"
          >
            立即查看
          </button>
        </div></van-swipe-item
      >
    </van-swipe>
    <!-- 健康防疫 -->
    <div style="display: flex; justify-content: space-around; margin-top: 5px">
      <span style="font-weight: bold; font-size: 30px">健康防疫</span>
      <span style="line-height: 40px">24小时全程守护</span>
    </div>
    <!-- 新冠指南 -->
    <div
      style="
        height: 50px;
        display: flex;
        justify-content: space-evenly;
        margin-top: 15px;
      "
    >
      <i class="iconfont icon-zhishi" @click="router.push(`/`)">新冠指南</i>
      <i class="iconfont icon-yisheng-" @click="router.push(`/`)">在线问医生</i>
      <i class="iconfont icon-shouye1" @click="router.push(`/`)">新冠疫苗</i>
    </div>
    <div style="height: 50px; display: flex; justify-content: space-evenly">
      <i class="iconfont icon-menzhen" @click="router.push(`/`)">发热门诊</i>
      <i class="iconfont icon-shouye" @click="router.push(`/`)">家庭药箱</i>
      <i class="iconfont icon-hesuan-08" @click="router.push(`/`)">查核酸点</i>
    </div>

    <!-- 底部顶起 -->
    <div style="height: 50px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import httpApi from "@/http";
const router = useRouter();
// 顶部搜索框

const onSearch = (val: any) => showToast(val);
let h_city = ref();
const onClickButton = function () {
  h_city = h_city.value;
  let params = { h_city };
  httpApi.ChaxunApi.chaxun(params).then((res) => {
    console.log("医院列表为:", res);
    if (res.data.code == 200) {
    } else {
      alert("请输入正确的城市名");
    }
  });
};
// 地址
const show = ref(false);
const fieldValue = ref("");
const cascaderValue = ref("");
// 顶部搜索
const value1 = ref("");
// 懒加载
const images = [
  "https://img.zx123.cn/Resources/zx123cn/uploadfile/2016/0121/b3e151cd2a26b00cf7aaf43918a112e9.jpg",
  "https://img-qn.51miz.com/preview/element/00/01/26/72/E-1267239-F3E0FEE5.jpg",
  "https://pic.616pic.com/bg_w1180/00/15/08/7ZHyovLBOA.jpg",
  "https://pic.616pic.com/bg_w1180/00/24/25/PEGQVGv4Gp.jpg",
  "https://img95.699pic.com/photo/40179/9898.jpg_wh300.jpg",
];
</script>

<style scoped>
* {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.my-swipe .van-swipe-item {
  height: 150px;
}

.my-swipe1 .van-swipe-item {
  color: #fff;
  line-height: 84px;
  text-align: center;
}
.dj:active {
  background-color: rgb(27, 156, 49);
  color: white;
  font-weight: bold;
}
.dj1:active {
  background-color: rgba(53, 53, 219, 0.459);
  color: white;
  font-weight: bold;
}
a {
  color: black;
}
</style>
